<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>列表页面</title>
<link rel="stylesheet" type="text/css" href="images/public.css" />
<link rel="stylesheet" type="text/css" href="images/list.css" />
</head>
  <body>
		<div id="top" class="auto">
      	<div class="nav">
         	<div class="left same"><img src="images/mainnav_l.gif"/></div>
            
            <div class="mainNav">
               <img class="logo" src="images/logo.gif" />
               <ul>
                  <li><a href="butifulDemo.html">首页</a></li>
                  <li><a href="list.html">手机</a></li>
                  <li><a href="details.html">电脑</a></li>
                  <li><a href="#">平板</a></li>
                  <li><a href="#">电视</a></li>
               </ul>
            </div>
            
            <div class="right same"><img src="images/mainnav_r.gif"/></div>
         </div>
         
         <div class="nav1">
            <form class="search" action="">
            	<input class="keywords" type="text" name="keywords" />
               <input class="btn" type="submit"value="" />
            </form>
         
         	<div class="enter">
            	<a href="#">登录</a>|
               <a href="#">注册</a>　　<!-- 注册后面有个全角空格 -->
               <img src="images/shoppingcart_sicon.png"/>  
               <a class="cart" href="#">购物车0件</a>
            </div>
         </div>
      </div>
      
      <div id="position" class="auto">
      	当前位置： <a href="#">首页</a> &gt; <a href="#">小米手机</a>
      </div>
      
      <div id="list" class="auto">
      	<div class="listTitle">
         	<h2>商品列表</h2>
            <div class="sort"> 
               <a><img src="images/goods_id_DESC.gif"/> </a>
               <a><img src="images/shop_price_default.gif"/> </a>
               <a><img src="images/last_update_default.gif"/> </a>
            </div>
         </div>
         
         <div class="imgList">
         	<ul>
            	<li>
               	<a href="details.html"><img class="litpic" width="160" height="160" src="images/88_thumb_G_1363925352471.jpg" /></a>              	
                  <p class="p0">R81</p>
                  <p class="p1">￥144</p>
                  <p class="p2">￥120</p>
                  <p class="p3">
                  	<a href="#"><img src="images/goumai.gif" /></a>　　 <!-- 此处有2个全角空格 -->
                     <a href="#"><img src="images/shoucang.gif" /></a>
                  </p>
               </li>
               
               <li>
               	<img class="litpic" width="160" height="160" src="images/88_thumb_G_1363925352471.jpg" />               	
                  <p class="p0">R81</p>
                  <p class="p1">￥144</p>
                  <p class="p2">￥120</p>
                  <p class="p3">
                  	<a href="#"><img src="images/goumai.gif" /></a>　　 <!-- 此处有2个全角空格 -->
                     <a href="#"><img src="images/shoucang.gif" /></a>
                  </p>
               </li>
               
               <li>
               	<img class="litpic" width="160" height="160" src="images/88_thumb_G_1363925352471.jpg" />               	
                  <p class="p0">R81</p>
                  <p class="p1">￥144</p>
                  <p class="p2">￥120</p>
                  <p class="p3">
                  	<a href="#"><img src="images/goumai.gif" /></a>　　 <!-- 此处有2个全角空格 -->
                     <a href="#"><img src="images/shoucang.gif" /></a>
                  </p>
               </li>
               
               <li>
               	<img class="litpic" width="160" height="160" src="images/88_thumb_G_1363925352471.jpg" />               	
                  <p class="p0">R81</p>
                  <p class="p1">￥144</p>
                  <p class="p2">￥120</p>
                  <p class="p3">
                  	<a href="#"><img src="images/goumai.gif" /></a>　　 <!-- 此处有2个全角空格 -->
                     <a href="#"><img src="images/shoucang.gif" /></a>
                  </p>
               </li>
               
               <li>
               	<img class="litpic" width="160" height="160" src="images/88_thumb_G_1363925352471.jpg" />               	
                  <p class="p0">R81</p>
                  <p class="p1">￥144</p>
                  <p class="p2">￥120</p>
                  <p class="p3">
                  	<a href="#"><img src="images/goumai.gif" /></a>　　 <!-- 此处有2个全角空格 -->
                     <a href="#"><img src="images/shoucang.gif" /></a>
                  </p>
               </li>
            </ul>
            <!-- ul左浮动脱离了文档流没有高度了 -->
            <div style="clear:both"></div>
         </div>
      </div>
      
      <div id="bottom">
      	<p>联系QQ 1435785971</p>     
         <p>powered by <a href="http://www.sifangku.com">私房库</a></p>
      </div>
  </body>
</html>